<template>
<div class="wrap" :style="{ width:width, background: back}">
  <div class="left">
    <div class="title">{{title}}</div>
    <div class="people"><span>{{Math.round(num) || 0}}</span><span>{{unit}}</span></div>
  </div>
  <div class="right">
    <img :src="img" alt="">
    <el-popover
      width="200"
      trigger="hover"
      placement="bottom"
      :content="tips">
      <img v-if="tips" class="pop" slot="reference" src="../../../../../assets/image/icon/query.png" alt="">
    </el-popover>
  </div>
</div>
</template>

<script>
export default {
  props: {
    num: [String, Number],
    img: {
      type: String,
      default: ''
    },
    unit: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    back: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '24%'
    },
    tips: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  }
}
</script>

<style lang="less" scoped>
.wrap {
  // width:24%;
  margin-top: 10px;
  border-radius: 8px;
  color: #FFFFFF;
  height: 102px;
  display: flex;
  justify-content: space-between;

  .left {
    width: 70%;

    .title {
      margin-top: 20px;
      margin-left: 34px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
    }

    .people {
      margin-top: 10px;
      margin-left: 34px;

      >span:nth-child(1) {
        font-size: 30px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
      }
    }
  }

  .right {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    >img {
      display: block;
      width: 63px;
      height: 66px;
      margin-top: 30px;
    }
    .pop {
      width: 23px;
      height: 23px;
      position: absolute;
      right: 5px;
      top: 5px;
    }
  }
}
</style>
